import React, { useState, useImperativeHandle, forwardRef } from 'react'
import Dialog from '../Dialog/index'
import FooterBtn from './footer'
export interface SettingRef {
  open: () => void
}

const Setting = forwardRef<SettingRef>((_, ref) => {
  const [show, setShow] = useState(false)
  const handleConfirm = () => {
    setShow(false)
  }
  const handleClose = () => {
    setShow(false)
  }
  const footerNode: React.ReactNode = (
    <FooterBtn onCancel={handleClose} onConfirm={handleConfirm} />
  )
  useImperativeHandle(ref, () => ({
    open: () => setShow(true),
  }))

  return (
    <Dialog
      title="设置"
      show={show}
      onClose={() => setShow(false)}
      footer={footerNode}
    >
      <div className="flex flex-col items-center justify-center h-full">
        <h3 className="mb-2 w-full font-semibold">
          上下文携带条数
          <span className="text-xs font-normal">
            (测试版本不支持，本地部署版本支持)
          </span>
        </h3>
        <select
          className="w-full  bg-gray-100 text-gray-800 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150"
          id="contextNum"
        >
          <option value="3">3条</option>
          <option value="5">5条</option>
          <option value="10">10条</option>
        </select>
      </div>
    </Dialog>
  )
})

export default Setting
